<template>
	<view class="content">
		<view class="headerTop">
			<!-- 头部 -->
			<u-collapse @close="stata=true" @open="stata=false" class="fexd" :value="expanded" ref="collapse">
				<u-collapse-item :title="title">
					<text class="u-collapse-content texts" v-for="v,i in selectData" :class="{clickTilt:clickIndex===i}"
						@click="clickTilt(i,v.meta.title)">{{v.meta.title}}</text>
				</u-collapse-item>
			</u-collapse>
		</view>

		<view class="scanning">
			<image @click="scanning" src="https://pc.chinaonebuild.com/images/person/40230.png" mode=""
				style="width: 48rpx;height: 48rpx;margin-right: 20rpx;">
			</image>
		</view>

		<!-- 信息 -->
		<view class="userinfo">
			<view class="name">
				{{name}}
			</view>
			<view class="msg-tip">
				<view class="msg-name">
					Hello，{{fullName}}
				</view>
				<view class="msg-chickentext fs28">
					{{toDayText}}
				</view>
			</view>
		</view>
		<view class="common-fun">
			<view class="box-common">
				<view class="title">
					常用功能
				</view>
				<view class="text-color  fs24" @click="editFun">
					编辑应用
				</view>
			</view>
			<view class="box-item mt-10" v-if="funList.length">
				<view v-for="(item,index) in funList" :key="index"
					:class="{'common-box': true,'fun-item': index%4 != 0,'mt-30': index>3,'mb-30': true}"
					@click="goPage(item)">
					<view>
						<u-image width="88rpx" height="88rpx"
							:src="`https://pc.chinaonebuild.com/images/workspace/${item.icon}.png`"></u-image>
					</view>
					<view
						:class="{fs24:true, 'mt-10':true,'longword-label': true,labelSet5: item.label.length==5,labelSet6: item.label.length==6,labelSet7: item.label.length==7 }">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="box-item mt-10" style="padding: 60rpx 0;text-align: center;" v-else>
				<text class="fs28">
					暂无常用功能，
				</text>
				<text class="fs28" style="color: #2289FF;font-weight: 400;" @click="editFun">
					去添加
				</text>
			</view>
		</view>
		<view class="space" />
		<view class="my-upcoming">
			<view class="box-Upcoming">
				<view class="title fs28">
					我的待办
				</view>
				<view class="text-color fs24" @click="myUPcomingPage">
					查看更多
				</view>
			</view>
			<view class="box-item mt-10" v-if="upList.length||ProductionData.length">
				<!-- 智慧建造 -->
				<template v-if="upList.length">
					<view v-for="(item,index) in upList" :key="index" class="upcomming-list" @click="goMyUpcoming(item)">
						<view class="up-left">
							<u-image width="60rpx" height="60rpx" :src="typeIcons[item.type]"></u-image>
							<view class="item-center">
								<view class="fs28">
									{{item.typeName}}
								</view>
								<view class="fs24">
									{{item.remark}}
								</view>
							</view>
						</view>
						<view class="up-right" style="text-align: right;">
							<u--text color="#606266" :text="item.startTime" :size="13" />
							<u-icon name="arrow-right" color="#909399"></u-icon>
						</view>
					</view>
				</template>
				<!-- 生产运营 -->
				<template v-if="ProductionData.length">
					<view class="items" v-for="v,i in ProductionData.slice(0,3)" :key="v.id" @click="goApprovalPage(v)">
						<view class="titlesd">
							<view class="fs28 mb-10">
								{{v.categoryLabel||v.procDefName}}
							</view>
							<view class="fs24 mb-10" style="margin-top: 5rpx;color: #858689">
								{{v.startUserName}}提交了一条审批申请，请您审批
							</view>
							<view class="fs24" style="color: #858689;margin-top: 5rpx;">
								{{v.applyTime}}
							</view>
						</view>
						<view class="titles-min">
							<u-icon name="arrow-right" color="#909399"></u-icon>
						</view>
					</view>
				</template>
			</view>
			<view v-else>
				<NoData
					:src="dataType==1?`https://pc.chinaonebuild.com/images/workspace/loading.png`:`https://pc.chinaonebuild.com/images/workspace/nodata.png`"
					width="256rpx" height="256rpx" :msg="dataType==1?'数据加载中...':'暂无待办'" />
			</view>
		</view>
	</view>
</template>
<script>
	import {
		login
	} from '../../api/api';
	import NoData from '@/components/noData/index.vue'
	export default {
		components: {
			NoData
		},
		data() {
			return {
				// -------------编辑应用
				// 区域名称
				titleList: [],
				// 用户权限菜单 智慧建造、生产运营
				initList: [
					[],
					[]
				],
				// 各系统各区域块儿位于第几个，不包含常用功能
				allApplication: {},
				// 当前应展示的 智慧建造/生产运营（去除常用功能所剩下的）
				resultList: [
					[],
					[]
				],
				// 0:智慧建造  1:生产运营
				systemType: 0,
				//常用操作label列表
				commonLabelList: [],
				// 区域上边是否有空块
				spaceList: [],
				// ------------

				// 下拉框的数据
				selectData: [],
				//主体数据
				centerData: [],
				// 是否展开
				expanded: [],
				// 图标状态
				stata: true,
				// 选中的值
				title: '请选择',
				// 选中的索引
				clickIndex: 0,
				/*  */
				dataType: 1,
				toDayText: undefined,
				name: undefined,
				fullName: undefined,
				//【假勤申请、访客登记、告警事件、巡更任务、会议预定】
				// meeting 会议、patrol 巡更 、holiday 请假、visitor 访客 、alert 告警
				typeIcons: {
					holiday: 'https://pc.chinaonebuild.com/images/workspace/fakeAttendance2.png',
					visitor: 'https://pc.chinaonebuild.com/images/workspace/visitor2.png',
					alert: 'https://pc.chinaonebuild.com/images/workspace/alarm2.png',
					patrol: 'https://pc.chinaonebuild.com/images/workspace/patrol2.png',
					meeting: 'https://pc.chinaonebuild.com/images/workspace/scheMeeting2.png',
				},
				// 智慧建造:  所有应用菜单路径列表 15个
				homeMenus: {},
				// 常用功能列表
				funList: [],
				queryParams: {
					pageSize: 3,
					pageNum: 1,
				},
				upType: 1,
				upList: [],
				// 智慧建造的数据
				ProductionData: [],
			};
		},
		onLoad(op) {
			// 新加的其他页面用
			uni.removeStorageSync('YUN_S')
			// 获取菜单
			this.getData()
			/*  */
			this.$nextTick(() => {
				this.name = uni.getStorageSync('nickname').slice(-2)
				this.fullName = uni.getStorageSync('nickname')
				this.getMenus()
				// 获取鸡汤
				this.getChickenSoup()
			})
		},
		async onPullDownRefresh() {
			console.log(this.$store.state.ProductionOperation);
			if (this.$store.state.ProductionOperation) {
				await this.production()
			} else {
				await this.getUpcomingList()
			}
			uni.stopPullDownRefresh()
		},
		async onReady() {
			// this.checkTokenAndRedirect()
			// 获取我的常用功能
			await this.getCommonFunction()
			if (this.$store.state.ProductionOperation) {
				await this.production()
			} else {
				await this.getUpcomingList()
			}

		},
		watch: {
			'$store.state.ProductionOperation': {
				async handler(v) {
					await this.getCommonFunction()
					this.upList = []
					this.ProductionData = []
					if (v) {
						this.production()
					} else {
						this.getUpcomingList()
					}
				},
				immediate: true
			}
		},
		methods: {
			//监听是否有token
			checkTokenAndRedirect() {
				const token = uni.getStorageSync('SET_TOKEN');
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pagesA/public/login'
								});
							}
						}
					});
				}
			},

			//扫码
			scanning() {
				/* var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': true
					},
					(ret) => {
						// console.log(ret);
						// let result = JSON.stringify(ret)
						if (ret.resp_message == 'success') {
							let index = ret.resp_result.indexOf('id')
							let index2 = ret.resp_result.indexOf('schedulingCycle')
							let index3 = ret.resp_result.indexOf('meetingReserveId')

							if (index !== -1) {
								let data = ret.resp_result.slice(index).split("&")[0].split("=")
								this.$api.deepen_design_base_info({}, `/${data[1]}`).then(v => {
									uni.navigateTo({
										url: `./Scanning?id=${data[1]}&data=${encodeURIComponent(JSON.stringify(v.data))}`
									})
								}).catch(err => {
									console.log(err);
								})
							} else if (index2 !== -1) {
								let data = ret.resp_result.slice(index2).split("&")[0].split("=")
								uni.navigateTo({
									url: `./Scans?schedulingId=${data[1]}`
								})
							} else if (index3 !== -1) {
								let data = ret.resp_result.slice(index3).split("&")[0].split("=")
								uni.navigateTo({
									url: `./meeting/index?meetingReserveId=${data[1]}&isSignIn=${data[2]}`
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '此二维码没有生产过程！'
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '扫码失败！'
							})
						}
					}) */


				/* this.$api.deepen_design_base_info({}, `/26650`).then(v => {
					uni.navigateTo({
						url: `./Scanning?id=26650&data=${encodeURIComponent(JSON.stringify(v.data))}`
						// url: `./Scanning?id=25409&data=${encodeURIComponent(JSON.stringify(v.data.infoList))}`
					})
				}).catch(err=>{
					console.log(err);
				}) */
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: (ret) => {
						console.log(ret);
						let index = ret.result.indexOf('id')
						let index2 = ret.result.indexOf('schedulingCycle')
						let index3 = ret.result.indexOf('meetingReserveId')

						if (index !== -1) {
							let data = ret.result.slice(index).split("&")[0].split("=")
							this.$api.deepen_design_base_info(data[1]).then(v => {
								uni.navigateTo({
									url: `/pagesIndex/todoList/Scanning?id=${data[1]}&data=${(JSON.stringify(v.data))}`
								})
							}).catch(err => {
								console.log(err);
							})
						} else if (index2 !== -1) {
							let data = ret.result.slice(index2).split("&")[0].split("=")
							uni.navigateTo({
								url: `/pagesIndex/todoList/Scans?schedulingId=${data[1]}`
							})
						} else if (index3 !== -1) {
							let data = ret.result.slice(index3).split("&")[0].split("=")
							uni.navigateTo({
								url: `/pagesIndex/meeting/index?meetingReserveId=${data[1]}&isSignIn=${data[2]}`
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '此二维码没有生产过程！'
							})
						}
					}
				});
			},
			/* getAppIcon(icon) {
				return require(`https://pc.chinaonebuild.com/images/workspace/${icon}.png`)
			}, */
			// 过滤主体数据
			filterData({
				children
			}) {
				this.centerData = children || []
				uni.setStorageSync('menu', children)
			},
			// 是否是生产运营全局状态 0不 1是
			productionOperation() {
				this.$store.commit('SET_ProductionOperation', this.title == '智慧建造' ? 0 : 1)
			},
			// 获取数据
			getData() {
				this.$api.applicationType().then(res => {
					this.selectData = res.data.sort((a, b) => {
						return b.menuId - a.menuId
					})
					console.log(this.selectData, 'this.selectData');
					this.filterData(res.data[this.clickIndex])
					this.title = res.data[this.clickIndex].meta.title
					this.productionOperation()
				})
			},
			// 点击的元素 v点击的索引
			clickTilt(v, title) {
				this.expanded = []
				this.stata = true
				this.title = title
				this.productionOperation()
				this.clickIndex = v
				this.filterData(this.selectData[v])
				// 初始化下拉框
				this.$nextTick(() => {
					this.$refs.collapse.init()
				})
			},
			/* ------------------- */
			// 生产运营
			production() {
				this.$api.todoList({
					...this.queryParams,
					type: 1,
				}).then(res => {
					this.ProductionData = res.data.rows
					if (!this.ProductionData.length) {
						this.dataType = 2
					}
				})
			},
			// 智慧建造的
			getUpcomingList() {
				this.$api.getUpcoming({
					...this.queryParams,
					approvalStatus: 1
				}).then(res => {
					this.upList = res.rows
					if (!this.upList.length) {
						this.dataType = 2
					}
				})
			},
			myUPcomingPage() {
				console.log(this.$store.state.ProductionOperation);
				uni.navigateTo({
					url: !this.$store.state.ProductionOperation ? '/pagesIndex/todoList/todoList/index' :
						'/pagesIndex/todoList/operation/operation'
				})
			},
			// 生产运营功能跳转
			goApprovalPage(item) {
				// fromTab 0: 表示是从首页进行跳转，首页跳转的都是能进行审批操作的
				let label = ''
				console.log(item, 'item');
				switch (item.category) {
					case 'fbsgl':
						// 分包商管理
						label =
							`/pagesIndex/contractManagement/subcontractPages/subcontractor?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fgsgl':
						// 分供商管理
						label =
							`/pagesIndex/contractManagement/subcontractPages/subSupplier?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fbhtps':
						// 分包合同评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/subcontract?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fbhtbcxyps':
						// 分包合同补充协议评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/settlement?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fbhtjs':
						// 分包合同结算
						label =
							`/pagesIndex/contractManagement/subcontractPages/contractSettle?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzhtps':
						// 物资合同评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialReview?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzhtbcxyps':
						// 物资合同补充协议评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialReplenish?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzhtjs':
						// 物资合同结算
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialSettlement?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fbcbgl':
						// 分包成本管理
						label =
							`/pagesIndex/costManagement/subcontractingCost?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'zlcbgl':
						// 租赁成本管理
						label =
							`/pagesIndex/costManagement/rentalCost?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzcbgl':
						// 物资成本管理
						label =
							`/pagesIndex/costManagement/materialCost?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'yscbgl':
						// 运输成本管理
						label =
							`/pagesIndex/costManagement/transportationCost?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'qtcbgl':
						// 其他成本管理
						label =
							`/pagesIndex/costManagement/otherCosts?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'zjjh':
						// 资金计划
						label =
							`/pagesIndex/fundingPlan/funding?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fbhtfksq':
						// 分包合同付款申请
						label =
							`/pagesIndex/fundingPlan/subcontractApplication?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'fghtfksq':
						// 分供合同付款申请
						label =
							`/pagesIndex/fundingPlan/splitApplication?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'xmlxgl':
						// 项目立项管理
						label =
							`/pagesIndex/projectApproval/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'lyhtgl':
						// 履约合同管理
						label =
							`/pagesIndex/performanceManagement/performContract?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'lyhtbcxy':
						// 履约合同补充协议
						label =
							`/pagesIndex/performanceManagement/contractSettlement?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzcgjh':
						//物资采购计划
						label =
							`/pagesIndex/materialManagement/materialProcurement/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'lxwzjc':
						//零星物资进场
						label =
							`/pagesIndex/materialManagement/materialsSporadic/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzkcgl':
						//物资库存管理
						label =
							`/pagesIndex/materialManagement/materialInventory/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzzkjh':
						//物资总控计划
						label =
							`/pagesIndex/materialManagement/materialControl/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzjc':
						//物资进场
						label =
							`/pagesIndex/materialManagement/materialApproach/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wztc':
						//物资退场
						label =
							`/pagesIndex/materialManagement/materialExit/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wzck':
						//物资出库
						label =
							`/pagesIndex/materialManagement/materialOut/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
					case 'wztk':
						//物资退库
						label =
							`/pagesIndex/materialManagement/materialReturn/index?id=${item.id}&fromTab=0&taskId=${item.taskId}`
						break;
				}
				console.log(label, 'label');
				uni.navigateTo({
					url: label
				})
			},
			// 智慧建造功能跳转
			goMyUpcoming(item) {
				let label = ""
				switch (item.type) {
					case 'holiday':
						// 假勤申请
						label =
							`/pagesIndex/myApproval/component/toBeApproved/component/details?id=${item.id}&taskId=${item.taskId}`
						break;
					case 'visitor':
						// 访客登记
						label = `/pagesIndex/visitorInfo/components/visitorRegistration?id=${item.id}&taskId=${item.taskId}`
						break;
					case 'alert':
						// 告警事件
						label =
							`/pagesIndex/alarmManagement/components/alarmDetail?id=${item.id}&cFrom=home&taskId=${item.taskId}`
						break;
					case 'patrol':
						// 巡更任务
						label = `/pagesIndex/onlinePatrol/patrolDetail?id=${item.id}&taskId=${item.taskId}`
						break;
					case 'meeting':
						// 会议预定
						// label = `pages/synthesize/bookingRecord/detail?id=${encodeURIComponent(JSON.stringify(item.id))}`
						label = `/pagesIndex/bookMeeting/ApprovalMeeting?id=${item.id}&taskId=${item.taskId}`
						break;
				}
				uni.navigateTo({
					url: label
				})
			},
			async getCommonFunction() {
				this.initApp()
				await this.$api.getCommonFun().then(res => {
					if (res.code == 200) {
						this.funList = []
						this.commonLabelList = []
						res.data.forEach(it => {
							let obj = {
								label: it.menu.menuName,
								menuId: it.menuId,
								icon: it.menu.icon,
							}
							this.funList.push(obj)
							this.commonLabelList.push(obj.label)
						})
					}
				}).then(() => {
					this.systemType = this.$store.state.ProductionOperation
					this.commonFun = [...this.funList]
					this.getCurrentApplicationArea()
				})
			},
			getChickenSoup() {
				this.$api.getWelcomeText().then(res => {
					this.toDayText = res.msg
				})
			},
			getMenus() {
				this.homeMenus = uni.getStorageSync('APPLICATION_PATHS');
			},
			goPage(item) {
				uni.navigateTo({
					url: `/pagesIndex/${this.homeMenus[item.label]}`
				})
			},
			//  ---------------编辑应用
			editFun() {
				uni.navigateTo({
					url: `/pagesIndex/todoList/applicationEditing?funlist=${encodeURIComponent(JSON.stringify(this.funList))}&clickIndex=${this.clickIndex}`,
				})
			},
			// 获取该用户权限菜单
			async initApp() {
				await this.$api.applicationType().then((res) => {
					// 块标题数组
					this.titleList = []
					// 全部菜单列表
					this.initList = []
					this.allApplication = []
					let appList = res.data
					appList.forEach((it, ind) => {
						// 块内部各应用
						let arr = []
						it.children && it.children.forEach((it2, ind2) => {
							arr[ind2] = []
							// 块标题
							if (this.systemType == ind) {
								this.titleList.push(it2.meta.title)
							}
							it2.children && it2.children.forEach(it3 => {
								// 块内部各应用
								arr[ind2].push({
									label: it3.meta.title,
									icon: it3.meta.icon
								})
								this.allApplication[it3.meta.title] = ind2
							})
						})
						this.initList.push(arr)
					})
					uni.setStorageSync('allApplication', this.allApplication)
				})
			},
			ifShowSpace(labels) {
				let hasApp = false
				labels.forEach(it => {
					if (this.commonLabelList.indexOf(it) != -1) {
						hasApp = true
					}
				})
				return hasApp
			},
			// 获取当前四个区域块应展示的应用
			async getCurrentApplicationArea() {
				await this.initList[this.systemType].forEach((it, index) => {
					this.resultList[this.systemType][index] = []
					this.resultList[this.systemType][index] = it.filter(it => {
						return this.commonLabelList.indexOf(it.label) == -1
					})
					let labels = this.initList[this.systemType][index].map(item => {
						return item.label
					})
					this.spaceList[index] = this.resultList[this.systemType][index].length || this.ifShowSpace(
						labels) ? true : false
					uni.setStorageSync('systemType', this.systemType)
					uni.setStorageSync('resultList', [...this.resultList])
					uni.setStorageSync('spaceList', [...this.spaceList])
					// uni.setStorageSync('commonLabelList', [...this.commonLabelList])
					uni.setStorageSync('titleList', [...this.titleList])
					uni.setStorageSync('initList', [...this.initList])
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.scanning {
		background-color: #2289FF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	::v-deep .u-line {
		border: none !important;
	}

	.items {
		height: 148rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 28rpx;
		border-bottom: 1px solid #eaeef5;

		.titles-min {
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #858689;
		}

		.titlesd {
			color: #191919;
			font-size: 28rpx;
		}
	}

	::v-deep .u-collapse-item__content {
		background-color: #fff;
	}

	::v-deep .u-cell--clickable {
		background-color: #1c71d3 !important;
	}

	::v-deep .u-cell__body {
		color: #FFFFFF;
	}

	::v-deep .u-collapse {
		background-color: #2289FF;
		box-sizing: border-box;
	}

	::v-deep .u-cell__body__content {
		flex: none !important;
	}

	::v-deep .u-cell__title-text {
		color: #fff !important;
	}

	::v-deep .u-icon__icon--info {
		color: #fff !important;
	}

	::v-deep .u-cell__body {
		justify-content: center;
	}

	.texts {
		padding: 20rpx;
		text-align: center;
		color: #393751;
		// background-color: #FFF;
	}

	.texts:hover {
		background-color: #CCCCCC;
		border-radius: 18rpx;
	}

	.clickTilt {
		background-color: rgba(34, 137, 255, 0.1);
		border-radius: 18rpx;
	}

	.content {
		overflow-x: hidden;
		height: 100%;

		.headerTop {
			background: #2289FF;
			padding-top: 80rpx;
		}
	}

	.userinfo {
		width: 100%;
		height: 340rpx;
		background-image: url(https://pc.chinaonebuild.com/images/Subtract.png);
		background-size: 100% 100%;
		color: white;
		position: relative;

		.name {
			width: 148rpx;
			height: 148rpx;
			text-align: center;
			line-height: 148rpx;
			font-size: 40rpx;
			font-weight: 500;
			background-image: url(https://pc.chinaonebuild.com/images/range.png);
			background-size: 100% 100%;
			position: absolute;
			top: 50%;
			left: 48rpx;
			transform: translateY(-50%);
		}

		.msg-tip {
			position: relative;
			top: 35%;
			left: 226rpx;

			.msg-name {
				font-size: 36rpx;
			}

			.msg-chickentext {
				margin-top: 18rpx;
				width: 488rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
				line-height: 34rpx;
			}
		}
	}

	.common-fun {
		// height: 420rpx;
		padding: 28rpx;

		.box-item {
			padding: 28rpx 17rpx;

			>view {
				display: inline-block;
			}
		}

		.fun-item {
			margin-left: 93rpx;
		}

		.common-box {
			position: relative;
		}
	}

	.my-upcoming {
		// height: 546rpx;
		// margin-bottom: 66px;
		padding: 28rpx;

		.box-item {
			padding-bottom: 100rpx;

			.upcomming-list {
				height: 138rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 28rpx;
				border-bottom: 1px solid #eaeef5;

				.up-left,
				.up-right {
					display: flex;
				}

				.item-center {
					display: inline-block;
					margin-left: 16rpx;

					>view:last-child {
						width: 367rpx;
						@include overflow-ellipsis;
						margin-top: 12rpx;
						color: #606266;
					}
				}
			}
		}
	}

	.box-common,
	.box-Upcoming {
		display: flex;
		justify-content: space-between;
		border-left: #2289FF solid 8rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;

		.title {
			font-weight: 500;
		}
	}

	.fs24 {
		@include text-font-size(24rpx)
	}

	.fs28 {
		@include text-font-size(28rpx)
	}

	.space {
		@include center-space()
	}

	.longword-label {
		position: absolute;
		width: 180rpx;
	}

	.labelSet5 {
		left: -18rpx;
	}

	.labelSet6 {
		left: -26rpx;
	}

	.labelSet7 {
		left: -28rpx;
	}
</style>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>